<template>
  <div>
    <el-form ref="queryForm" :model="queryParams" :inline="true" @submit.prevent.native>
      <el-form-item :label="$t('科目名称')" prop="keyName">
        <el-input
          v-model="queryParams.keyName"
          :placeholder="$t('科目名称')"
          clearable
          :onsubmit="false"
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm" style="margin-top: 50px">
      <el-form-item :label="$t('选择关注科目')">
        <el-tree
          ref="key"
          :data="pcwDefaultKeyList"
          node-key="keyCode"
          show-checkbox
          default-expand-all
          :empty-text="$t('加载中')"
          :props="defaultProps"
        />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button v-hasPermi="['company:pcw:edit']" type="primary" @click="submitForm">{{ $t("保存") }}</el-button>
    </div>
  </div>

</template>

<script>
import { findSelFocus, savePcwDetailsFocus } from '@/api/company/pcw/pcwDetailsFocus'
import { matchSubjectTree } from '@/api/company/pcw/pcwTempSubject'
export default {
  props: {
    companyId: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
      return {
          // 遮罩层
          loading: true,
          // 默认全部科目数据
          pcwDefaultKeyList: [],
          // 选中的科目ID
          pcwSelFocusList: [],
          // 查询参数
          queryParams: {
              companyId: this.companyId || this.$route.query.companyId
          },
          // 表单校验
          rules: {},
          defaultProps: {
            children: 'children',
            label: 'keyName'
          },
          form: {
            companyId: this.companyId || this.$route.query.companyId
          }
      }
  },
  created() {
  },
  methods: {
    /** 查询关注科目列表 */
    getList() {
      this.loading = true
      matchSubjectTree(this.queryParams).then(response => {
        this.pcwDefaultKeyList = response.rows
        this.loading = false
      })
      findSelFocus(this.queryParams).then(response => {
        this.pcwSelFocusList = response.data.keyIds
        this.$refs.key.setCheckedKeys(this.pcwSelFocusList)
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      this.$parent.$parent.formOpen = false
      // 刷新list页面
      this.$parent.$parent.getList()
    },
    // 所有keyName节点数据
    getKeyAllCheckedKeys() {
      // 目前被选中的菜单节点
      const checkedKeys = this.$refs.key.getHalfCheckedKeys()
      // 半选中的菜单节点
      const halfCheckedKeys = this.$refs.key.getCheckedKeys()
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
      return checkedKeys
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          this.form.keyIds = this.getKeyAllCheckedKeys()
          savePcwDetailsFocus(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.closeForm()
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      })
    }
  }
}
</script>
